<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>留言板</title>
	<link rel="stylesheet" href="css/msgBoard.css">
	<script src="./js/jq.js"></script>
	<script src="js/msgBoard.js"></script>
	<script>
		// 匿名函数包裹，防止外界操作的修改
		var db;
	var arrayKey=[]
	var openRequest;
	var lastCursor;
	
	var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
	
	function init()
	{
	    //打开数据库
	    openRequest = indexedDB.open("messageIndexDB");
	    //只能在onupgradeneeded创建对象存储空间
	    openRequest.onupgradeneeded = function(e)
	    {
	        console.log("running onupgradeneeded");
	        var thisDb = e.target.result;
	        if(!thisDb.objectStoreNames.contains("messageIndexDB"))
	        {
	            console.log("I need to create the objectstore");
	            /*
	             *创建对象存储空间，第一个参数必须和打开数据库的第一个参数一致
	             *设置键名是id,并且可以自增.
	             *autoIncrement默认是false,keyPath默认null
	             */
	            var objectStore = thisDb.createObjectStore("messageIndexDB", { keyPath: "id", autoIncrement:true });
	            /*
	             *创建索引
	             *第一个参数是索引名,第二个是属性名,第三个设置索引特性
	             */
	            objectStore.createIndex("name", "name", { unique: false });
	        }
	    }
	
	    openRequest.onsuccess = function(e)
	    {
	        //e.target.result返回一个数据库实例
	        db = e.target.result;
	        db.onerror = function(event)
	        {
	          alert("数据库错误: " + event.target.errorCode);
	          console.dir(event.target);
	        };
	        if(db.objectStoreNames.contains("messageIndexDB"))
	        {
	            console.log("contains messageIndexDB");
	            //读写方式开启事务
	            var transaction = db.transaction(["messageIndexDB"],"readwrite");
	            transaction.oncomplete = function(event)
	            {
	                //  console.log("All done!");
	            };
	            transaction.onerror = function(event)
	            {
	                // 错误处理
	                console.dir(event);
	            };
	            //var content= document.querySelector("#content");
	
	            //得到messageIndexDB的objectStore对象
	            var objectStore = transaction.objectStore("messageIndexDB");
	
	            //游标查询
	            objectStore.openCursor().onsuccess = function(event)
	            {
	                //event.target.result获取存储空间的下一个对象
	                var cursor = event.target.result;
	                var flag=0;
	
	                //判断是否存在下一个对象,不存在是curson为null
	                if (cursor)
	                {
	                   	console.log(cursor.key); //获取键
	                    console.dir(cursor.value); //实际对象,一个Object实例
	                    var msgList= document.querySelector("#messageList");
	                    var msgDiv=document.createElement("div");
	                    var msgTxt = document.createTextNode(cursor.value[flag]["name"]+"说："+cursor.value[flag]["content"]);
	                    msgDiv.id=cursor.key;
	                    msgDiv.appendChild(msgTxt);
	                    msgList.appendChild(msgDiv);
	                    arrayKey.push(cursor.key);
	                    flag++;
	                    lastCursor=cursor.key;
	                    cursor.continue();   //将游标下移一项
	                }
	                else
	                {
	                      console.log("Done with cursor");
	                }
	            };
	            //错误处理
	             objectStore.openCursor().οnerrοr=function(event){
	                console.dir(event);
	            };
	        }
	    };
	
	    openRequest.onerror = function (event) {
	        // 对request.error做一些需要的处理！
	        console.log("your web may not support IndexedDB,please check.");
	    };
	
	    //焦点处理
	    document.querySelector("#message").addEventListener("focus",function()
	        {
	            this.value = "";
	        });
	    document.querySelector("#name").addEventListener("focus",function()
	        {
	            this.value = "";
	        });
	
	    //添加数据
	    document.querySelector("#btn1").addEventListener("click", function()
	    {
	        var content=document.querySelector("#message").value;
	        var name=document.querySelector("#name").value;
	        /*var address=document.querySelector("#address").value;*/
	        var messageIndexDB=[{"name":name,"content":content}];
	
	        var transaction = db.transaction(["messageIndexDB"], "readwrite");
	        transaction.oncomplete = function(event)
	        {
	           // console.log("transaction complete");
	        };
	        transaction.onerror = function(event)
	        {
	            console.dir(event);
	        };
	         //得到messageIndexDB的objectStore对象
	        var objectStore = transaction.objectStore("messageIndexDB");
	        objectStore.add(messageIndexDB);
	        objectStore.openCursor().onsuccess = function(event)
	        {
	            cursor = event.target.result;
	            var key;
	            if(lastCursor==null)
	            {
	                key=cursor.key;
	                lastCursor=key;
	            }
	            else
	            {
	                key=++lastCursor;
	            }
	            var msgList= document.querySelector("#messageList");
	            var msgDiv=document.createElement("div");
	            msgDiv.id=key;
	            var msgTxt = document.createTextNode(name+"说："+content);
	            msgDiv.appendChild(msgTxt);
	            msgList.appendChild(msgDiv);
	            arrayKey.push(key);
	            console.log("success add new record!key:"+key);
	            console.dir(messageIndexDB);
	        }
	    });
	    //删除
	    document.querySelector("#delete").addEventListener("click", function()
	    {
	        if(arrayKey.length==0){
	            console.log("no data to delete!");
	        }
	        else
	        {
	            var transaction = db.transaction(["messageIndexDB"], "readwrite");
	            transaction.oncomplete = function(event)
	            {
	                   //    console.log("transaction complete!");
	            };
	
	            transaction.onerror = function(event)
	            {
	              console.dir(event);
	            };
	             //得到messageIndexDB的objectStore对象
	            var objectStore = transaction.objectStore("messageIndexDB");
	            var removeKey=arrayKey.shift();
	            //获取key
	            var getRequest=objectStore.get(removeKey);
	            getRequest.onsuccess=function(e)
	            {
	                var result =getRequest.result;
	                console.dir(result);
	            }
	            //删除key
	            var request=objectStore.delete(removeKey);
	            request.onsuccess = function(e)
	            {
	              console.log("success delete record!");
	            };
	            request.onerror = function(e)
	            {
	              console.log("Error delete record:", e);
	            };
	            //隐藏要删除的元素
	            document.getElementById(removeKey).style.display="none";
	        }
	    });
	}
	window.addEventListener("DOMContentLoaded", init, false);

		$(function () {
			// 还能输入的字得个数
			var able_count = 140;
			// 是否可以发布留言
			var release_able = false;
			// 右上角文字
			var $title_txt = $('.title-txt');
			// 留言框
			var $main_area = $('.main-area');
			// 发布按钮
			var $release_btn = $('.release-btn');

			// 输入框获取焦点
			$main_area.focus(function () {
				console.log("获取焦点");
				$(this).parent().addClass('outline');
				$title_txt.addClass('title');
				if (able_count >= 0) {
					$title_txt.html("还可以输入" + able_count + "个字");
				} else {
					$title_txt.html("你以超出" + (-able_count) + "个字");
				}
			})

			// 输入框失去焦点
			$main_area.blur(function () {
				console.log("失去焦点");
				$(this).parent().removeClass('outline');
				$title_txt.removeClass('title');
				$title_txt.html("");
			})

			// 输入框文本修改
			$main_area.on('input', function () {
				console.log("文本修改");
				// 剩余可输入的字个数
				able_count = 140 - $main_area.val().length;
				// console.log(able_count);
				// 根据可输入字的个数决定右上角文本的提示 与 是否能发布的状态
				if (able_count >= 0 && able_count <= 140) {
					$title_txt.html("还可以输入" + able_count + "个字");
					if (able_count != 140) {
						release_able = true;
					} else {
						release_able = false;
					}
				} else {
					$title_txt.html("你以超出" + (-able_count) + "个字");
					release_able = false;
				}
				// 根据发布状态决定发布按钮的样式
				if (release_able) {
					$release_btn.css({
						backgroundColor: "orange",
						borderColor: "orange"
					})
				} else {
					$release_btn.css({
						backgroundColor: "#ffc09f",
						borderColor: "#ffc09f"
					})
				}

			})

			// 发布事件
			$release_btn.click(function () {
				console.log("发布");
				if (release_able) {
					console.log('可以发布');
					// 创建show对象的各个部位
					var $showContent = $('<div class="show-content"></div>'),
						$showName = $('<div class="show-name"></div>'),
						$showTxt = $('<div class="show-txt"></div>'),
						$showTime = $('<div class="show-time"></div>'),
						$showClose = $('<div class="show-close"></div>'),
						$showP = $('<p class=""></p>');

					var date = new Date();
					// 设置，对象结构内内容
					$showName.text("XxXx");
					$showP.text($main_area.val());
					$showTime.text(date);
					$showClose.text("x");
					// 添加进入主结构
					$showTxt.append($showP);
					$showContent.append($showName);
					$showContent.append($showTxt);
					$showContent.append($showTime);
					$showContent.append($showClose);

					// 向所有匹配元素内部的开始处插入内容
					$('.show').prepend($showContent);

					// 添加动画
					// 位置从输入框处下移
					$showContent.css({
						top: '-150px'
					})
					$showContent.animate({
						top: 0
					}, 200)

					// 删除事件
					$showClose.click(function () {
						// 显示插入的索引位置
						// console.log($(this).parent().index());
						// console.log($showContent.index());


						// 删除操作为顺便
						// $showContent.remove();

						// 使用删除动画，创建效果
						$showContent.animate({
							height: 0
						}, 200, function () {
							// 动画结束后将自身从dom中移除
							$showContent.remove();
						})


					})

					// 发布成功后收尾工作
					$main_area.val(""); //输入框清空
					able_count = 140;  //输入框可输入内容数重置
					release_able = false;
					$release_btn.css({
						backgroundColor: '#ffc09f',
						borderColor: '#ffc09f'
					})  //按钮点击事件重置

				}
			})


		})
	</script>
	<style>
		.ztl-li {
			list-style: none;
			position: relative;
			top: 15px;
		}

		ul li a {
			text-decoration: none;
			color: black;

		}

		ul li {
			display: inline;
			padding-left: 60px;
		}

		.ztl-div {
			position: absolute;
			top: 0px;
			left: 0px;
			width: 1750px;
			background: white;
			opacity: 0.4;
			height: 50px;
		}

		.ztl-h3 {
			position: 0px;
			display: inline;
		}

		#logo {
			position: absolute;
			top: -20px;
			left: 400px;
			width: 90px;
			height: 110px;
			display: inline;
		}

		.zymwz {
			font-size: large;
		}

		#zymwz-img {
			position: absolute;
			top: 20%;
			left: 32%;
			width: 30%;
			height: 35%;
			display: none;
		}

		#head {
			width: 100%;
			height: 70%;
		}

		body,
		ul {
			margin: 0;
			padding: 0;
		}

		ul {
			list-style: none;
		}

		/*最外层*/
		.wrap {
			width: 600px;
			height: 165px;
			margin: 20px auto;
			border-radius: 4px;
			border: 1px solid #ddd;
			padding: 0 10px;
		}

		.wrap-head {
			width: 100%;
			height: 24px;
			padding-top: 4px;
			overflow: hidden;
		}

		.head-logo {
			width: 40%;
			float: left;
		}

		.head-logo img {
			width: 30px;
			height: 30px;
		}

		.head-txt {
			padding: 4px 0;
			width: 60%;
			float: right;
		}

		.head-txt a {
			font-size: 12px;
			color: #eb7350;
			text-decoration: none;
		}

		.title-txt.title {
			text-align: right;
			color: black;
			display: block;
			width: 100%;
		}


		/*内层设计，输入框*/
		.main-txt {
			border: 1px solid #ccc;
			width: 98%;
			height: 68px;
			margin: 4px 0 0;
			padding: 5px;
			box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.15) inset;
		}

		.main-txt textarea {
			border: none;
			width: 100%;
			height: 66px;
			outline: none;
			resize: none;
			color: #333;
		}

		.main-txt.outline {
			outline: 2px orange solid;
		}

		/*下层设计*/
		.warp-footer {
			width: 100%;
			height: 40px;
			margin: 6px 0;
			overflow: hidden;
		}

		.warp-icon-cont {
			width: 65%;
			float: left;
			margin-top: 10px;
		}

		.warp-icon-cont ul li {
			display: inline-block;
			margin-right: 15px;
			cursor: pointer;
		}

		.warp-icon-cont a {
			font-size: 12px;
			color: #333;
			text-decoration: none;
			height: 20px;
			margin-left: 5px;
			display: block;
			width: 25px;
			float: right;
			line-height: 20px;
		}

		.warp-icon-cont a:hover {
			color: #eb7350;
		}

		.warp-icon-cont img {
			width: 20px;
			height: 20px;
		}

		.warp-footer-btns {
			width: 35%;
			float: right;
			overflow: hidden;
			margin-top: 3px;
		}

		.release-btn {
			width: 80px;
			height: 28px;
			float: right;
			background-color: #ffc09f;
			border: 4px solid #fbbd9e;
			cursor: pointer;
			border-radius: 2px;
		}

		.release-btn a {
			display: block;
			color: #fff;
			width: 80px;
			height: 28px;
			line-height: 28px;
			text-align: center;
			text-decoration: none;
			font-size: 15px;
		}

		/*后期添加的留言框*/
		.show {
			width: 600px;
			margin: 20px auto;
		}

		.show-content {
			width: 578px;
			border: 1px solid #ccc;
			border-radius: 4px;
			margin-bottom: 10px;
			padding: 10px;
			position: relative;
			overflow: hidden;
		}

		.show-name {
			width: 100%;
			text-align: left;
			font-size: 14px;
			color: #333;
			font-weight: bold;
		}

		.show-txt {
			width: 100%;
			color: #444;
			font-size: 14px;
			margin-top: 10px;
		}

		.show-txt p {
			width: 100%;
			word-wrap: break-word;
		}

		.show-time {
			font-size: 12px;
			color: #808080;
			margin-top: 10px;
		}

		.show-close {
			position: absolute;
			top: 10px;
			right: 10px;
			font-size: 12px;
			color: #ccc;
			cursor: pointer;
			transition: .5s;
		}

		.show-close:hover {
			color: red;
		}
	</style>

</head>

<body>
	<div class="head">
		<header><img src="./img/mmb.jpg" id="head"></header>
	</div>


	<!-- </div>\ -->
	<div class="ztl-div">
		<img src="./img/logo.png" id="logo">
		<center>
			<ul class="ztl-li">
				<li><a href="index.html">首页</a></li>
				<li><a href="aboutUs.html">关于我们</a></li>
				<li><a href="#">在线问诊</a></li>
				<li><a href="#">健康科普</a></li>
				<li><a href="#">新闻中心</a></li>
				<li><a href="map.html">位置导航</a></li>
				<li><a href="bendilyb.html">用户留言</a></li>
			</ul>
		</center>
	</div>
	<!-- 发布留言的主体 -->
	<div class="wrap">
		<div class="wrap-head">
			<div class="head-logo">
				
			</div>
			<div class="head-txt">
				<a class="title-txt" href="javascript:void(0)">只因美宠物医院欢迎您的留言与建议！&nbsp;&nbsp;&nbsp;</a>
			</div>
		</div>
		<div class="main-txt">
			<textarea name="" rows="" cols="" class="main-area"></textarea>
		</div>
		<div class="warp-footer">
			<div class="warp-icon-cont">
				<ul>
					<li><img src="./img/xl.png" alt="" />
						<a href="javascript:void(0)">表情</a>
					</li>
					<li><img src="./img/tp.png" alt="" />
						<a href="javascript:void(0)">图片</a>
					</li>
					<li><img src="./img/sp.png" alt="" />
						<a href="javascript:void(0)">视频</a>
					</li>


				</ul>
			</div>
			<div class="warp-footer-btns">
				<div class="release-btn">
					<a href="javascript:void(0)">发布</a>
				</div>
			</div>
		</div>
	</div>
	<!-- 显示留言的主体 -->
	<div class="show">
		<!-- <div class="show-content">
			<div class="show-name">Xx</div>
			<div class="show-txt">
				<p class="">这是内容</p>
			</div>
			<div class="show-time">2018年10月24日</div>
			<div class="show-close">x</div>
		</div> -->
	</div>
</body>

</html>